<div class="design-tree-container">
    <context-menu-container>
        <el-tree
            v-if="inited"
            ref="treeexpbar_tree"
            class="design-tree"
            node-key="id"
            lazy
            :show-checkbox="!isSingleSelect"
            :check-on-click-node="!isSingleSelect"
            :default-expanded-keys="expandedKeys"
            :props="{
                label: 'text',
                isLeaf: 'leaf',
                children: 'children'
            }"
            :load="load.bind(_self)"
            :highlight-current="true"
            :expand-on-click-node="false"
            @check="onCheck.apply(_self, arguments)"
            @current-change="selectionChange.apply(_self, arguments)"
            :filter-node-method="filterNode"
            :empty-text="$t('entities.doclib.productdoclibtree_treeview.nodata')"
        >
            <template slot-scope="{ node, data }">
                <context-menu
                    :ref="data.id"
                    :isBlocked="true"
                    :contextMenuStyle="{width: '100%'}"
                    :data="node"
                    :renderContent="($event) => renderContextMenu($event)"
                    @showContext="showContext(data,$event)"
                >
                    <tooltip transfer style="width: 100%;" max-width="2000" placement="right">
                        <div class="tree-node" @dblclick="doDefaultAction(node)">
                            <span class="icon">
                                <i v-if="data.iconcls && !Object.is(data.iconcls, '')" :class="data.iconcls"></i>
                                <img v-else-if="data.icon && !Object.is(data.icon, '')" :src="data.icon">
                                <icon v-else-if="isOutputIconDefault" type="ios-paper-outline"></icon>&nbsp;
                            </span>
                            <span class="text">
                                <span v-if="data.html" v-html="data.html"></span>
                                <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
                            </span>
                        </div>
                        <template slot="content">
                            <span v-if="data.html" v-html="data.html"></span>
                            <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
                        </template>
                    </tooltip>
                </context-menu>
            </template>
        </el-tree>
    </context-menu-container>
</div>